<template>
  <div class="bg">
    <template v-if="form.newOrOldWeCustomer">
      <div v-if="form.posterUrl">
        <img style="width: 100%;" :src="form.posterUrl" alt="" />
      </div>
      <div v-else>
        <div class="code_content">
          <img class="code_img" :src="form.addWeUserUrl" alt="" />
        </div>
        <div class="sub-des">
          长按识别二维码添加好友
        </div>
      </div>
    </template>
    <template v-else>
      <div v-if="form.jumpContentType == 1">
        <div class="code_content">
          <img class="code_img" :src="form.jumpContent.jumpUrl" alt="" />
        </div>
        <div class="sub-des">
          长按识别二维码添加好友
        </div>
      </div>
      <div v-else-if="form.jumpContentType == 3" style="text-align: center;">
        <img style="margin-top: 80px; height: 80px;" src="../../assets/default_icon.png" alt="" />
        <div class="tip">
          {{ form.jumpContent.jumpGuide }}
        </div>
        <div style="position: absolute; top: 70%; left: 50%; transform: translate(-50%, -70%);">
          <wx-open-launch-weapp id="launch-btn" :username="form.jumpContent.jumpOther" :path="form.jumpContent.jumpUrl">
            <script type="text/wxtag-template">
              <button class="btn" style="width: 119px;
              height: 32px;
              background-color: rgba(82, 186, 49, 0.996078431372549);
              border: none;
              border-radius: 4px;font-size:12px;color: #fff;">打开小程序</button>
            </script>
          </wx-open-launch-weapp>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import { getWxCode, getQueryValue } from '@/utils/index'
import { getIdentityCode } from '@/api/identity'
import Loading from '@/components/Loading.vue'
import { getWxTicket } from '@/api/common'

export default {
  name: 'identity-code',
  components: {
    Loading,
  },
  data() {
    return {
      loading: false,
      userInfo: {},
      form: {
        knowCustomerName: '',
        addWeUser: {
          executeUserCondit: {
            change: false,
            weUserIds: [],
          },
          executeDeptCondit: {
            change: false,
            deptIds: [],
            posts: [],
          },
        },
        weKnowCustomerCodeTags: [],
        postersId: null,
        posterUrl: '',
        attachments: [],
        isAddAllUser: 1,
        appointWeUser: {
          executeUserCondit: {
            change: false,
            weUserIds: [],
          },
          executeDeptCondit: {
            change: false,
            deptIds: [],
            posts: [],
          },
        },
        jumpContentType: 1,
        jumpContent: {
          jumpGuide: '',
          jumpUrl: '',
          jumpTitle: '',
          jumpOther: '',
        },
        newOrOldWeCustomer: true,
      },
    }
  },
  methods: {
    getData() {
      return getIdentityCode({
        knowCustomerId: this.$route.query.id,
        unionid: this.userInfo.unionId,
      }).then((res) => {
        this.form = res.data
        if (!this.form.newOrOldWeCustomer && this.form.jumpContentType == 2) {
          window.location.href = this.form.jumpContent.jumpUrl
          this.$toast.clear()
          return Promise.reject()
        }
        this.$toast.clear()
      })
    },
    back() {
      document.addEventListener(
        'WeixinJSBridgeReady',
        function() {
          WeixinJSBridge.call('closeWindow')
        },
        false,
      )
      WeixinJSBridge.call('closeWindow')
    },
  },
  async mounted() {
    this.$toast.loading()
    await getWxCode()
    if (sessionStorage.getItem('userinfo')) {
      this.userInfo = JSON.parse(sessionStorage.getItem('userinfo'))
      await this.getData()
      getWxTicket(window.location.href.split('#')[0]).then((res) => {
        if (res.code === 200) {
          let { timestamp, nonceStr, signature } = res.data
          wx.config({
            beta: true,
            debug: false,
            appId: sessionStorage.getItem('weAppId'),
            timestamp, // 必填，生成签名的时间戳
            nonceStr, // 必填，生成签名的随机串
            signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
            jsApiList: ['getLocation', 'chooseImage', 'previewImage'], //必填
            openTagList: ['wx-open-launch-weapp'],
            success: function(res) {
              location.reload()
            },
            fail: (res) => {
              this.$toast.clear()
              alert('config失败:' + JSON.stringify(res))
              if (res.errMsg.indexOf('function not exist') > -1) {
                alert('版本过低请升级')
              }
            },
          })
        }
      })
    }
  },
  created() {},
}
</script>
<style lang="less" scoped>
.bg {
  background: linear-gradient(180deg, #eaf5ff 0%, rgba(253, 253, 253, 0) 100%);
  border-radius: 0px 0px 0px 0px;
}
.tip {
  font-size: 16px;
  margin-top: 30px;
  text-align: center;
}
.code_content {
  margin-top: 100px;
  text-align: center;
  .code_img {
    height: 180px;
    width: 180px;
    margin: 10px auto;
  }
}

.sub-des {
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}
</style>
